<template>
    <div>
        <div class="view" >
            <div class="left">
                <ul>
                    <li v-for="item in leftList" :class="item.path === menuPath ? 'active' : ''" :key="item.path" @click="changeMenu(item.path)">
                        {{item.label}}
                    </li>
                </ul>
            </div>
            <div class="right">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            leftList: [{
                path: '/',
                label: '微应用'
            },
            {
                path: '/weiMenu1',
                label: '微应用菜单1'
            },{
                path: '/weiMenu2',
                label: '微应用菜单2'
            }],
            menuPath: undefined
        }
    },
    mounted () {
        this.menuPath = this.leftList[0].path
    },
    methods: {
        changeMenu (path) {
            this.menuPath = path

            this.$router.push({
                path: path
            })
        }
    }
}
</script>

<style scoped>
    h1{
        padding: 0;
        margin: 0;
    }
    h3, ul, ul li{
        padding: 0;
        margin: 0;
    }
    ul li{
        list-style: none;
    }
    .view{
        display: flex;
        align-items: flex-start;
        height: calc(100vh - 50px);
        width: 100%;
        position: relative;
    }
    .left{
        width: 200px;
        background-color: #fff;
        height: calc(100vh - 50px);
    }
    .left ul li {
        padding: 16px;
        border-bottom: 1px solid #ddd;
    }
    .left ul li.active{
        background-color: blue;
    }
    .left ul li:hover {
        cursor: pointer;
        opacity: 0.5;
    }
</style>